<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>img在div中居中对齐</title>
    <style type="text/css">
        div{
            width: 800px;
            height: 800px;
            border: 1px solid #669933;
            text-align: center;
        }
        img{
            vertical-align: middle;
        }
        /*这么做的原理就是让span元素水平垂直居中，img元素和sapn元素的基线在同一位置*/
        span{
            display: inline-block;
            height: 100%;
            vertical-align: middle;
        }
    </style>
</head>
<body>
<div>
    <img src="http://cnkifile.b0.upaiyun.com/image/mudengkoudai.jpg" alt="我是图片"><span></span>
</div>
</body>
</html>